<template>
    <el-card shadow="never" style="max-height: 70vh; overflow: auto">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="disabled">
            <el-form-item label="id:" prop="id" v-show="false">
                <el-input v-model="form.id" disabled/>
            </el-form-item>
            <el-form-item label="所属用户:" prop="user_id">
                <SelectPage v-model="form.user_id" :url="'/admin/user/selectPage'" show_field="nickname" show_id="uid"
                            query_field="uid" :multiple="false"/>
            </el-form-item>
            <el-form-item label="姓名:" prop="realname">
                <el-input v-model="form.realname" placeholder="请输入姓名" clearable/>
            </el-form-item>
            <el-form-item label="封面:" prop="images">
                <ImageUpload v-model="form.images" :limit="10"/>
            </el-form-item>
            <el-form-item label="所在单位:" prop="organization">
                <el-input v-model="form.organization" placeholder="请输入所在单位" clearable/>
            </el-form-item>
            <el-form-item label="专家岗位:" prop="position">
                <el-input v-model="form.position" placeholder="请输入专家岗位" clearable/>
            </el-form-item>
            <el-form-item label="专家证件:" prop="certificates">
                <ImageUpload v-model="form.certificates"/>
            </el-form-item>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="简介:" prop="introduction">
                        <el-input type="textarea" rows="5" :show-word-limit="true" maxlength="200"
                                  v-model="form.introduction" placeholder="请输入简介" clearable/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="单价:" prop="price">
                        <el-input-number v-model="form.price" :step="0.01" :min="0"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="在线开始时间:" prop="online_start_time">
                        <el-time-picker
                            v-model="form.online_start_time" value-format="HH:mm:ss"
                            :picker-options="{
                          selectableRange: '00:00:00 - 23:59:59'
                        }"
                            placeholder="在线开始时间">
                        </el-time-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="在线结束时间:" prop="online_end_time">
                        <el-time-picker
                            v-model="form.online_end_time" value-format="HH:mm:ss"
                            :picker-options="{
                          selectableRange: '00:00:00 - 23:59:59'
                        }"
                            placeholder="在线结束时间">
                        </el-time-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="状态:" prop="status">
                        <el-select v-model="form.status" placeholder="请选择状态" clearable>
                            <el-option v-for="(item, index) in status" :key="index" :label="item.label"
                                       :value="item.value"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.status === 3">
                    <el-form-item label="失败原因:" prop="fail_content">
                        <el-input v-model="form.fail_content" placeholder="请输入失败原因" clearable/>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="disabled">
                    <el-form-item label="审核时间:" prop="verify_time">
                        <el-date-picker v-model="form.verify_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                                        placeholder="选择审核时间"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="排序:" prop="sortweight">
                        <el-input-number v-model="form.sortweight" :step="1" :min="0"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="选择地区:" prop="province">
                        <SelectCityArea ref="city" :value="[form.province_id, form.city_id, form.district_id]"
                                        @change="onChangeCityArea"></SelectCityArea>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="地址:" prop="address">
                        <el-input v-model="form.address" placeholder="请输入地址" clearable/>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="disabled">
                    <el-form-item label="咨询数:" prop="chat_count" v-if="disabled">
                        <el-input-number v-model="form.chat_count" :step="1" :min="0"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="disabled">
                    <el-form-item label="订单数:" prop="order_count">
                        <el-input-number v-model="form.order_count" :step="1" :min="0"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button type="primary" @click="submitForm">确认</el-button>
                <el-button type="warning" @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>
<script>
import {regionData} from 'element-china-area-data'
import SelectCityArea from "@/components/My/SelectCityArea";

export default {
    name: 'EditForm',
    components: {SelectCityArea},
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
                realname: [{required: true, message: "请输入姓名", trigger: "blur"}],
                images: [{required: true, message: "请输入封面", trigger: "blur"}],
                organization: [{required: true, message: "请输入所在单位", trigger: "blur"}],
                position: [{required: true, message: "请输入专家岗位", trigger: "blur"}],
                certificates: [{required: true, message: "请输入专家证件", trigger: "blur"}],
                introduction: [{required: true, message: "请输入简介", trigger: "blur"}],
                price: [{required: true, message: "请输入单价", trigger: "blur"}],
                status: [{required: true, message: "请输入状态", trigger: "blur"}],
                province: [{required: true, message: "请输入省", trigger: "blur"}],
                province_id: [{required: true, message: "请输入省编号", trigger: "blur"}],
                city: [{required: true, message: "请输入市", trigger: "blur"}],
                city_id: [{required: true, message: "请输入市编号", trigger: "blur"}],
                district: [{required: true, message: "请输入区", trigger: "blur"}],
                district_id: [{required: true, message: "请输入区编号", trigger: "blur"}],
                // latitude: [{ required: true, message: "请输入纬度", trigger: "blur" }],
                // longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
            },
            form: {},
            // 区域选择配置
            areaOptions: regionData,
            status: [
                {label: "审核中", value: 1},
                {label: "已通过", value: 2},
                {label: "已拒绝", value: 3},
            ],

        }
    },
    watch: {
        findFormData: {
            handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },
        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    if (this.form.online_start_time && this.form.online_end_time ) {
                        let sT = this.form.online_start_time.split(":")
                        let eT = this.form.online_end_time.split(":")
                        if (Number(sT[0]) > Number(eT[0]))
                            return this.$message.error("在线开始时间不能大于结束时间");
                    }
                    this.$emit('submitForm', this.form)
                }
            })
        },
        // 表单重置
        reset() {
            this.resetForm('form')
        },
        onChangeCityArea(e) {
            if (e.length >= 3) this.$set(this.form, 'district_id', e[2])
            if (e.length >= 2) this.$set(this.form, 'city_id', e[1])
            if (e.length >= 1) this.$set(this.form, 'province_id', e[0])
            let pathLabels = this.$refs.city.getCheckedNodes()[0].pathLabels
            if (pathLabels.length >= 3) this.$set(this.form, 'district', pathLabels[2])
            if (pathLabels.length >= 2) this.$set(this.form, 'city', pathLabels[1])
            if (pathLabels.length >= 1) this.$set(this.form, 'province', pathLabels[0])
        }
    }
}
</script>
